Step 2 of 3: Adding Code to the Application

In the last step you set up your application, but you have not added drag-and-drop functionally to the application. In this step you'll continue by adding code to add functionality to the application.

Complete the following steps:

Navigate to the Solution Explorer, right-click MainPage.xaml file or the MainWindow.xaml file, and select View Code to switch to Code view.

In Code view, add the following import statements to the top of the page:

Visual Basic	Copy Code
Imports C1.WPF

C#
Copy Code
using C1.WPF;

C#	Copy Code
using C1.WPF;

Add code to the MainPage.xaml.cs (or .vb) file or the MainWindow.xaml.cs (or .vb) file in the page constructor so it looks similar to the following:

Visual Basic	Copy Code
Public Sub New() InitializeComponent() ' Initialize the C1DragDropManager Dim dd As New C1DragDropManager() dd.RegisterDropTarget(_ddGrid, True) For Each e As UIElement In _ddGrid.Children dd.RegisterDragSource(e, DragDropEffect.Move, ModifierKeys.None) Next AddHandler dd.DragDrop, AddressOf dd_DragDrop End Sub

Visual Basic

Copy Code

Public Sub New()
    InitializeComponent()
    ' Initialize the C1DragDropManager
    Dim dd As New C1DragDropManager()
    dd.RegisterDropTarget(_ddGrid, True)
    For Each e As UIElement In _ddGrid.Children
        dd.RegisterDragSource(e, DragDropEffect.Move, ModifierKeys.None)
    Next
    AddHandler dd.DragDrop, AddressOf dd_DragDrop
End Sub

C#
Copy Code
public MainPage()
{
  InitializeComponent();
  // Initialize the C1DragDropManager
  C1DragDropManager dd = new C1DragDropManager();
  dd.RegisterDropTarget(_ddGrid, true);
  foreach (UIElement e in _ddGrid.Children)
  {
    dd.RegisterDragSource(e, DragDropEffect.Move, ModifierKeys.None);
  }
  dd.DragDrop += dd_DragDrop;   
}
The code initiates a new instance of a C1DragDropManager and then calls the RegisterDropTarget method to indicate that the grid should act as a drop target by default. It then calls the RegisterDragSource method to indicate that users should be allowed to drag the elements in the grid and finally, the code attaches an event handler to the DragDrop event so the application can receive a notification and move the element being dragged into its new position

C#	Copy Code
public MainPage() { InitializeComponent(); // Initialize the C1DragDropManager C1DragDropManager dd = new C1DragDropManager(); dd.RegisterDropTarget(_ddGrid, true); foreach (UIElement e in _ddGrid.Children) { dd.RegisterDragSource(e, DragDropEffect.Move, ModifierKeys.None); } dd.DragDrop += dd_DragDrop; }

Add the following event handler to the MainPage.xaml.cs (or .vb) file or to the MainWindow.xaml.cs (or .vb) file, below all the other methods in the MainPage class:

Visual Basic	Copy Code
Private Sub dd_DragDrop(source As Object, e As DragDropEventArgs) ' Get mouse position Dim pMouse As Point = e.GetPosition(_ddGrid) ' Translate into grid row/col coordinates Dim row As Integer, col As Integer Dim pGrid As New Point(0, 0) For row = 0 To _ddGrid.RowDefinitions.Count - 1 pGrid.Y += _ddGrid.RowDefinitions(row).ActualHeight If pGrid.Y > pMouse.Y Then Exit For End If Next For col = 0 To _ddGrid.ColumnDefinitions.Count - 1 pGrid.X += _ddGrid.ColumnDefinitions(col).ActualWidth If pGrid.X > pMouse.X Then Exit For End If Next ' Move the element to the new position e.DragSource.SetValue(Grid.RowProperty, row) e.DragSource.SetValue(Grid.ColumnProperty, col) End Sub

Visual Basic

Copy Code

Private Sub dd_DragDrop(source As Object, e As DragDropEventArgs)
    ' Get mouse position
    Dim pMouse As Point = e.GetPosition(_ddGrid)
    ' Translate into grid row/col coordinates
    Dim row As Integer, col As Integer
    Dim pGrid As New Point(0, 0)
    For row = 0 To _ddGrid.RowDefinitions.Count - 1
        pGrid.Y += _ddGrid.RowDefinitions(row).ActualHeight
        If pGrid.Y > pMouse.Y Then
        Exit For
        End If
    Next
    For col = 0 To _ddGrid.ColumnDefinitions.Count - 1
        pGrid.X += _ddGrid.ColumnDefinitions(col).ActualWidth
        If pGrid.X > pMouse.X Then
        Exit For
        End If
    Next
    ' Move the element to the new position
    e.DragSource.SetValue(Grid.RowProperty, row)
    e.DragSource.SetValue(Grid.ColumnProperty, col)
End Sub

C#	Copy Code
private void dd_DragDrop(object source, DragDropEventArgs e) { // Get mouse position Point pMouse = e.GetPosition(_ddGrid); // Translate into grid row/col coordinates int row, col; Point pGrid = new Point(0, 0); for (row = 0; row < _ddGrid.RowDefinitions.Count; row++) { pGrid.Y += _ddGrid.RowDefinitions[row].ActualHeight; if (pGrid.Y > pMouse.Y) break; } for (col = 0; col < _ddGrid.ColumnDefinitions.Count; col++) { pGrid.X += _ddGrid.ColumnDefinitions[col].ActualWidth; if (pGrid.X > pMouse.X) break; } // Move the element to the new position e.DragSource.SetValue(Grid.RowProperty, row); e.DragSource.SetValue(Grid.ColumnProperty, col); }

Copy Code

private void dd_DragDrop(object source, DragDropEventArgs e)
{
  // Get mouse position
  Point pMouse = e.GetPosition(_ddGrid);
  // Translate into grid row/col coordinates
  int row, col;
  Point pGrid = new Point(0, 0);
  for (row = 0; row < _ddGrid.RowDefinitions.Count; row++)
    {
      pGrid.Y += _ddGrid.RowDefinitions[row].ActualHeight;
      if (pGrid.Y > pMouse.Y)
      break;
    }
  for (col = 0; col < _ddGrid.ColumnDefinitions.Count; col++)
  {
    pGrid.X += _ddGrid.ColumnDefinitions[col].ActualWidth;
    if (pGrid.X > pMouse.X)
    break;
  }
  // Move the element to the new position
  e.DragSource.SetValue(Grid.RowProperty, row);
  e.DragSource.SetValue(Grid.ColumnProperty, col);
}

The event handler starts by converting the mouse coordinates into row/column values. Then it uses the SetValue method to update the Grid.RowProperty and Grid.ColumnProperty values on the element that was dragged. Similar logic could be used to drag elements within other types of panel or list-type controls, or from one panel to another.

What You've Accomplished

In this step you added code to add functionality to your application. In the next step you'll run your application and observe some of the run-time interactions possible with DragDropManager for WPF and Silverlight.